---
title: Кольорова схема
image: Неможливо перекласти
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## Color Scheme Card

Represents different color schemes and is specially tailored for light and dark themes.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| Властивості      | Тип                                     | Опис                                                                                       | За замовчуванням |
| ---------------- | --------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------- |
| variant          | рядок                                   | Варіант колірної схеми. Опції включають `Темний`, `Світлий` та `Системний` | світла           |
| обрано           | булевий тип                             | If `true`, displays a checkmark to indicate the selected color scheme                      |                  |
| additional props | `React.ComponentPropsWithoutRef<'div'>` | Стандартні властивості HTML елемента `div`                                                 |                  |

</Tab>

</Tabs>

## Color Scheme Picker

Дозволяє користувачам вибирати між різними колірними схемами.

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| Властивості | Тип               | Опис                                                                                      |
| ----------- | ----------------- | ----------------------------------------------------------------------------------------- |
| значення    | `Кольорова схема` | Наразі обрана колірна схема                                                               |
| onChange    | функція           | Функція зворотного виклику, яку ви хочете запустити, коли користувач обирає колірну схему |

</Tab>

</Tabs>
